import ReactDOM from 'react-dom'
import { useState } from 'react'

// 函数副作用的案例
// 1 add操作了作用域外的数据，这就会产生副作用
let global = 'global'
function add (num1: number, num2: number) {
  global = 'local'
  return num1 + num2
}
console.log(add(1, 3), global)

// 2 函数changeName也是对作用域外的数据进行了操作
let outObject = {
  name: 'jack'
}
function changeName (value: typeof outObject) {
  value.name = 'rose'
}
changeName(outObject)
console.log('修改后', outObject)

const Counter = () => {

  const [count, setCount] = useState(0)
  const onClick = () => {
    setCount(count + 1)
  }

  const [isLoading, setIsLoading] = useState(true)
  const handleLoading = () => {
    setIsLoading(!isLoading)
  }

  const [songs, setSongs] = useState(['痴心绝对', '南山南', '成都'])
  const handleSongs = () => {
    setSongs(['好汉歌', ...songs])
  }
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={onClick}>加1</button>
      <hr />
      <div>{isLoading ? '加载中' : '数据加载完成'}</div>
      <button onClick={handleLoading}>加载数据</button>
      {songs.map((item, index) => (
        <p key={index + '123'}>{item}</p>
      ))}
      <button onClick={handleSongs}>增加歌曲</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'))
